<template>
  <div class="home">
    <my-header />
    <div class="container d-flex align-items-center mt-5">
      <a href="#" style="width:200px;" class='logo text-danger font-weight-bolder display-4'>
        MMall
      </a>
      <div class="inputBox d-flex">
        <input type="search" style="width:400px;text-indent:1rem;" class="border-danger p-1" placeholder="请输入商品名称">
        <button type="button" class="btn btn-danger px-4 rounded-0" >搜索</button>
      </div>
    </div>
    <!-- main -->
    <section class="container pt-4 d-flex">
      <div class="home-category bg-dark py-1" style="width:200px">
        <div v-for="v in 10" :key="v" class="d-flex p-2 ">
          <a class="text-white fs-14" href="#">手机</a>
          <a class="ml-2 text-white fs-14" href="#">数码</a>
        </div>
      </div>
      <div style="width:800px; height:300px" class="bg-info ml-2"> 
        <swiper>
          <swiper-slide>
            <img class="" src="../assets/logo.png" alt="">
          </swiper-slide>
          <swiper-slide>
            <img class="" src="../assets/logo.png" alt="">
          </swiper-slide>
          <swiper-slide>
            <img class="" src="../assets/logo.png" alt="">
          </swiper-slide>
        </swiper>
      </div>
    </section>
  </div>
</template>

<script>
import MyHeader from '../components/common/Header'
export default {
  name: 'home',
  data() {
    return {
      swiperOption: {
        pagination: {
          el: '.swiper-pagination'
        }
      },
    }
  },
  components: {
    MyHeader
  },
  mounted() {
    
  },
  methods: {
    async fetch() {
      
    }
  }
}
</script>

<style lang="scss" scoped>
  @import './../assets/styles/global.scss';
  
</style>
